<template>
    <div>
        添加分类
        <van-field label='分类名称' placeholder="请输入分类名称" v-model='name'/>
        <van-button @click="addcate" color="linear-gradient(to right, #20ffde, #0000ff)">
            添加分类
        </van-button>
        <br><br><br>
        添加商品
        <select v-model="form.gcates_id">
            <option :value="i.id" v-for="i in gclist">{{i.name}}</option>
        </select>
        <van-field v-model="form.name" label="商品名称" placeholder="请输入商品名称"/>
        <van-field v-model="form.price" label="商品价格" placeholder="请输入商品价格"/>
        <br>
        上传图片
        <van-uploader :after-read="upload"></van-uploader>
        <br><br>
        <van-button @click="add" color="linear-gradient(to right, #20ffde, #0000ff)">
            添加商品
        </van-button>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                name:'',
                form:{'pic':'',gcates_id:0},
                gclist:[],
            }
        },
        methods:{
            addcate(){                    //以字典形式传递
                this.$axios.post('gcateM',{'name':this.name})
                .then(res=>{
                    if(res.data.code==200){
                        alert('分类添加成功')
                    }
                })
            },
            get_gclist(){
                this.$axios.get('gcateM')
                .then(res=>{
                    this.gclist=res.data.list
                })
            },
            upload(file){
                let formdata=new FormData()
                formdata.append('file',file.file)
                formdata.append('gcates_id',this.form.gcates_id)
                this.$axios.post('goodupload',formdata)
                .then(res=>{
                    if(res.data.code==200){
                        alert(res.data.url)
                        this.form.pic=res.data.url
                    }
                    
                })
            },
            add(){
                this.$axios.post('goodsM',this.form)
                .then(res=>{
                    if(res.data.code==200){
                        alert('商品添加成功')
                    }
                })
            },
        },
        mounted(){
            this.get_gclist()
        },
    }
</script>

<style scoped>

</style>